<template>
    <div class="orderListRuleForm">

        <el-form :inline="true" ref="form" :model="form" label-width="80px" class="demo-form-inline" style="margin-left:0px">
            <el-form-item label="创建时间" prop="date" >
                <el-date-picker
                    v-model="form.date"
                    type="daterange"
                    align="right"
                    size="mini"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :default-time="['00:00:00', '23:59:59']"
                    :picker-options="pickerOptions">
                </el-date-picker>
            </el-form-item>

            <el-form-item label="名称:" prop="qunfa_name">
                <el-input placeholder="请输商品名称" v-model="form.name" size="mini"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="search" size="mini">搜索</el-button>
                <el-button @click="resetForm('form')" size="mini">重置</el-button>
                <el-button size="mini" @click="init()">刷新</el-button>
            </el-form-item>
        </el-form>

        <div class="table-wrap">
            <el-table :data="tableData" v-loading="loading" style="width: 100%;margin-bottom: 20px;" row-key="id" border
                      stripe default-expand-all>
              <el-table-column prop="goods_name" label="商品名称"></el-table-column>
              <el-table-column prop="price_former" label="调价前价格"></el-table-column>
              <el-table-column prop="commission_former" label="调价前佣金"></el-table-column>
              <el-table-column prop="links_former" label="调价前推广链接数"></el-table-column>
              <el-table-column prop="price_after" label="调价后价格"></el-table-column>
              <el-table-column prop="commission_after" label="调价后佣金"></el-table-column>
              <el-table-column prop="links_after" label="调价后推广链接数"></el-table-column>

            </el-table>
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                               :current-page="form.pageNumber" :page-sizes="[10, 50, 100, 200]" :page-size="form.pageSize"
                               background layout="total, sizes, prev, pager, next, jumper" :total="form.total"> </el-pagination>
            </div>
        </div>



    </div>
    
</template>

<script>
import {
    getlist,

} from "@/api/sell/tiaojiarecord/tiaojiarecord";

import Panle from '@/components/Panle';
import PersButton from '@/components/PersButton';
import {hasPermission, isShow} from '@/common/permission';
import VueJsonExcel from 'vue-json-excel';


export default {
    name:'Live-Order',
    components: {
        Panle,
        PersButton,
        VueJsonExcel,
    },
    data() {
        return {
            goods_id:'',


            old_price:'',
            old_commission:'',
            options: [],
            value: '',
            open: false,
            tiaojia_open: false,
            detail_open: false,
            edit_open: false,
            disable_open: false,
            del_open: false,
            tableData: [],
            tableDataLinks: [],
            number:0,

            name:'',
            adder:'',
            status:'',
            date:'',

            pageSize1: 10,
            pageNumber1: 1,

            form: {
                pageSize: 10,
                pageNumber: 1,
                total: 0,
                name:'',
                date:'',
            },

            optionsVa: [],
            value1: [],
           
            resForm: {
                "status":0,
                "value1":[]
            },
            pickerOptions: {
                shortcuts: [
                    {
                        text: '今天',
                        onClick(picker) {
                            const current = new Date();
                            const month = current.getFullYear() + '-' + (current.getMonth() + 1) + '-' + current.getDate(); //年月日
                            const start = new Date();
                            const end = new Date();
                            start.setTime(new Date(month).getTime());
                            end.setTime(new Date(month + ' 23:59:59').getTime());
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '昨天',
                        onClick(picker) {
                            const current = new Date();
                            const month = current.getFullYear() + '-' + (current.getMonth() + 1) + '-' + (current.getDate() - 1); //年月日
                            const start = new Date();
                            const end = new Date();
                            start.setTime(new Date(month).getTime());
                            end.setTime(new Date(month + ' 23:59:59').getTime());
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '上一周',
                        onClick(picker) {
                            const current = new Date();
                            const start_day = current.getDate() - current.getDay() - 6;
                            const end_day = current.getDate() - current.getDay();
                            const month = current.getFullYear() + '-' + (current.getMonth() + 1) + '-'; //年月
                            const start = new Date();
                            const end = new Date();
                            start.setTime(new Date(month + start_day).getTime());
                            end.setTime(new Date(month + end_day + ' 23:59:59').getTime());
                            picker.$emit('pick', [start, end]);
                        }
                    }
                ]
            },
            fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
        }
    },
    created() {
        sessionStorage.removeItem('live-stat')
        this.init(true);

    },
    methods: {
        hasPermission,
        isShow,
        init() {
            this.loading = true;
            if(this.form.date.length == 0){
                const today = new Date();
                const year = today.getFullYear();
                const month = today.getMonth() + 1; // 月份是从0开始的
                const day = today.getDate();
                // 当天开始时间
                const startTime = new Date(year, month - 1, day, 0, 0, 0);
                // 当天结束时间
                const endTime = new Date(year, month - 1, day, 23, 59, 59);
                this.form.date = [startTime,endTime]
            }

            getlist(this.form).then((res) => {
                this.tableData = res.data.list;
                this.form.total = res.data.list_num;
                this.loading = false;
            })
        },
        create: function () {
            this.open = true
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        search: function () {
            this.loading = true;
            // this.form.pageSize = 10;
            // this.form.pageNumber = 1;
            this.init();
        },
        handleSizeChange: function (e) {
            this.form.pageSize = e;
            this.init();
        },
        handleCurrentChange: function (e) {
            this.form.pageNumber = e;
            this.init();
        },
        handleSizeChange1: function (e) {
            this.pageSize1 = e;
            this.init();
        },
        handleCurrentChange1: function (e) {
            this.pageNumber1 = e;
            this.init();
        },
        resetForm(formName) {
            this.form.lapsed_time = ''
            this.form.label = ''
            this.form.day_time = ''
            this.form.add_time = ''
            this.init();
        },
        openSaff: async function() {
            
            const res = await getStaffData();
            this.optionsVa = res.data;
            const des = await getCustomerLossData();
            this.resForm.value1 = des.data.send_name;
            this.resForm.status = des.data.status;
            // this.resForm = {
            //     "status": 0,
            //     "value1": [],
            // };
            this.open = true;
            
        },
        submitForm:function(data){
            if (this.form1.name == '') {
                this.$notify({
                    title: '警告',
                    message: '商品名称不能为空',
                    type: 'warning'
                });
                return;
            }
            if (this.form1.type == '') {
                this.$notify({
                    title: '警告',
                    message: '商品类型不能为空',
                    type: 'warning'
                });
                return;
            }
            if (this.form1.price == '') {
                this.$notify({
                    title: '警告',
                    message: '商品价格不能为空',
                    type: 'warning'
                });
                return;
            }
            if (this.form1.commission == '') {
                this.$notify({
                    title: '警告',
                    message: '商品佣金不能为空',
                    type: 'warning'
                });
                return;
            }


            this.$confirm('确定保存吗', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                this.form1.detail = this.quill_info
                     addGoods(this.form1).then((res) => {
                    this.loading = false;
                 })

            }).catch(() => {
                    this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });



        },


        editForm:function(data){

            if (this.form1.name == '') {
                this.$notify({
                    title: '警告',
                    message: '商品名称不能为空',
                    type: 'warning'
                });
                return;
            }

            this.$confirm('确定保存吗', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                this.form1.detail = this.content2
                    goodsEdit(this.form1).then((res) => {
                        this.loading = false;
                        this.edit_open= false;
                        if(res.data.list){
                            this.init()
                        }
                     })

        }).catch(() => {
                this.$message({
                type: 'info',
                message: '已取消'
            });
        });



        },
      
    }
}

</script>

<style lang="scss" scoped>
.demo-form-inline {
    margin: 20px;

    .el-form-item {
        margin-bottom: 0;
    }
}
.el-form--inline .el-form-item {
    display: inline-block;
    vertical-align: top;
}

.orderListRuleForm .el-form-item {
    margin-bottom: 0;
}

.search-content {
    width: 100%;
    margin: 20px;
}
.yaoyue_neirong_content {
    display: flex;
}


.yaoyue_neirong_content_body {
    display: flex;
    flex-direction: column;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(180, 180, 180);
    padding: 10px;
    margin-left: 10px;
    width: 90%;
}

.yaoyue_neirong_content_title {
    width: 10%;
}

.yaoyue_neirong_content {
    width: 160%;
}

</style>